<template>
  <div class="detail-wrapper">
    <div class="detail-content">
      <el-tabs
        v-model="activeName"
        type="card"
        @tab-click="handleClick">
        <el-tab-pane
          label="订单基本信息"
          name="first">
          <div class="layui-row layui-col-space15">
						<div class="layui-col-md12">
							<div class="layui-card">
								<div class="layui-card-header" style="font-weight: 700;font-size: 15px;">订单状态</div>
								<div class="layui-card-body">
									<dl class="dl-horizontal">
										<div class="layui-col-md6">
											<dt>订单编号</dt>
											<dd>{{ order.orderCode }}</dd>
											<dt>提交时间</dt>
											<dd>{{ order.createTime }}</dd>
											<dt>订单处理耗时</dt>
											<dd>卡密</dd>
                    </div>
										<div class="layui-col-md6">
											<dt>订单状态</dt>
											<dd><span
                        :class="`layui-bg-${order.orderState === 5 ? 'blue' : 'red'}`"
                        style="padding: 4px 8px; border-radius: 18px;">
                        {{ order.orderState === 5 ? '交易成功' : '交易失败' }}
                        </span></dd>
											<dt>处理时间</dt>
											<dd>{{ order.dealTime }}</dd>
                      <dt>退款记录</dt>
											<dd>{{ order.orderRefund ? order.orderRefund.operType : '无退款记录' }}</dd>
										</div>
									</dl>
								</div>
							</div>
						</div>
						<div class="layui-col-md12">
							<div class="layui-card">
								<div class="layui-card-header" style="font-weight: 700;font-size: 15px;">商品信息</div>
								<div class="layui-card-body">
									<dl class="dl-horizontal">
										<dt>商品名称</dt>
										<dd style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">{{ order.goodsName }}</dd>
										<div class="layui-col-md6">
											<dt>商品类型</dt>
											<dd>
                        <span class="badge-auth badge-auth-b">{{ order.goodsTypeName }}</span>
                      </dd>
											<dt>单价|数量|总价</dt>
											<dd style="color: red;font-weight: 700;">
                        {{ order.goodsPrice }}元 |
                        {{ order.goodsNum }}个 |
                        {{ order.goodsPrice*order.goodsNum}} 元
                      </dd>
										</div>
										<div class="layui-col-md6">
											<dt>售后Q群</dt>
											<dd><a href="" target="_blank"></a></dd>
										</div>
										<div class="layui-col-md6">
											<dt>购买者IP</dt>
											<dd>{{ order.goodsUserIP }}</dd>
										</div>

									</dl>
								</div>
							</div>
						</div>
						<div class="layui-col-md12">
							<div class="layui-card">
								<div class="layui-card-header" style="font-weight: 700;font-size: 15px;">客户信息</div>
								<div class="layui-card-body">
									<dl class="dl-horizontal">
										<div class="layui-col-md6">
											<dt>购买客户</dt>
											<dd>({{ order.goodsUserID }})</dd>

										</div>
										<div class="layui-col-md6">
											<dt>{{ order.remark }}</dt>
											<dd></dd>
										</div>
									</dl>
								</div>
							</div>
						</div>
						    																	<!--	 -->
            <div class="layui-col-md12">
              <div class="layui-card">
                <div class="layui-card-header">
                  <font style="font-weight: 700;font-size: 15px;">卡密列表</font>&nbsp;&nbsp;&nbsp;&nbsp;
                  <a v-if="!isCopy" href="javascript:" @click="doCopy" class="copybtn" style="color: #1e9fff;padding: 1px 3px;line-height: normal; border: 1px solid #1e9fff;">复制卡密</a>
                  <a v-else href="javascript:" class="copybtn1" style="color: #67c23a;padding: 1px 3px;line-height: normal; border: 1px solid #67c23a;">已复制</a>
                  &nbsp;&nbsp; <a href="" target="_blank" style="color: #67c23a;padding: 1px 3px;line-height: normal; border: 1px solid #67c23a;">下载地址</a>
                  &nbsp;									</div>
                <div class="layui-card-body">
                  <table class="layui-table">
                    <thead>
                      <tr>
                        <th>卡号</th>
                        <th>密码</th>
                        <th>赠品/矩阵</th>
                        <th>导卡时间</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr class="copycard">
                        <td class="card_no"></td>
                        <td class="card_password">1</td>
                        <td> 永久有效</td>
                        <td>2021-08-27 18:27</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane
          label="金额明细"
          name="second">
          <el-table :data="order.userMoneyDetails">
            <el-table-column
              label="客户">
              {{ user.userName }}
            </el-table-column>
            <el-table-column
              prop="transactionTypeName"
              label="交易类型">
              <template slot-scope="{ row }">
                {{ row.transactionType }}
              </template>
            </el-table-column>
            <el-table-column label="变动类型">
              <template slot-scope="{ row }">
                {{ row.money >= 0 ? '增加' : '减少' }}
              </template>
            </el-table-column>
            <el-table-column prop="money" label="交易金额"></el-table-column>
            <el-table-column
              prop="beforeMoney"
              label="变化前（元）"
            ></el-table-column>
            <el-table-column prop="endMoney" label="变化后（元）"></el-table-column>
            <el-table-column label="交易日期" width="180">
              <template slot-scope="{ row }">
                {{ row.createTime | dateFormat }}
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            layout="prev, pager, next, jumper"
            :page-size="query.pageSize"
            :total="dataTotal"
            @current-change="pageChage"
          >
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane
          label="退款明细"
          name="third">
          <el-table :data="order.orderRefund">
            <el-table-column
              prop="money"
              label="退款金额">
            </el-table-column>
            <el-table-column
              label="处理人">
              {{ user.userName }}
            </el-table-column>
            <el-table-column
              prop="transactionTypeName"
              label="处理时间"
            ></el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div>
      <el-button
        type="danger">
        订单投诉
      </el-button>
      <el-button
        type="primary">
        联系客服
      </el-button>
    </div>
  </div>
</template>

<script>
import copy from 'copy-to-clipboard'
import { mapState } from 'vuex'
export default {
  props: {
    order: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      isCopy: false,
      activeName: 'first',
      dataTotal: 1,
      query: {
        pageSize: 1,
      },
    }
  },
  computed: {
    ...mapState({
      user: (state) => state.user
    })
  },
  methods: {
    goComplain(order) {
      this.$confirm(
        '“卡密平台”仅为系统服务商，不参与商户经营，您与商户产生纠纷，请自行协商解决，但“卡密平台”不允许商户出售违法违规商品，一旦您发现商户出售该等商品，可向执法机关举报，也可向“卡密平台”投诉，投诉方式：tousu.xxxx.com，“卡密平台”将保留相关证据并呈交给执法机关！',
        '提示',
        {
          confirmButtonText: '我知道了',
          showCancelButton: false,
          type: 'warning'
        }
      ).then(() => {
        location.href = `/complain-submit?orderID=${order.orderID}&orderCode=${order.orderCode}`
      })
    },
    doCopy() {
      const arr = []
      const cardList = this.order.orderCardVOList || []
      cardList.forEach((item) => {
        arr.push(`${item.cardNumber}/${item.cardPws}`)
      })
      copy(arr.join(';'))
      this.isCopy = true
      this.$message.success('复制成功')
    },
    pageChage() {

    },
  }
}
</script>

<style lang="scss">
.detail-wrapper {
  font-size: 13px;
  .detail-content {
    height: 580px;
    padding: 10px 0;
    overflow: auto;
  }
  .dl-horizontal {
    dt {
      float: left;
      width: 134px;
      height: 40px;
      line-height: 40px;
      overflow: hidden;
      clear: left;
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;
      border: 1px solid #e6e6e6;
      margin-top: -1px;
      background-color: #f2f2f2;
      color: #666;
    }
    dd {
      margin-left: 134px;
      letter-spacing: 1px;
      min-height: 30px;
      border: 1px solid #f4f5f8;
      height: 40px;
      line-height: 40px;
      margin-top: -1px;
      padding-left: 10px;
      border-left: 0;
    }
  }
  .badge-auth {
    font-size: 12px;
    background: #409EFF;
    color: white !important;
    padding: 4px 5px;
    border-radius: 2px;
    &-b {
      background: #67C23A;
    }
  }
  .el-button {
    padding: 10px 15px;
  }
}
// @import 'assets/style/layer.css';
@import 'assets/style/layui.css';
</style>
